<!DOCTYPE html>
<html>
<head>
    <title>设置个人资料</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myInfo.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="../js/plugins/jquery-form/jquery.form.js"></script>

    <script>
        $(function () {
            //设置一个公共成员变量状态
            var status;
            //先接收共享过来的用户数据
            var userStr = sessionStorage.getItem("user")
            var user = JSON.parse(userStr);

            //设置背景图,设置他的样式
            $(".myBg").css("background-image", "url('" + user.coverImgUrl + "')");
            //回显数据
            $(".info").renderValues(user);


            //保存所有数据
            //点击保存按钮
            $("#saveBtn").click(function () {
                //提交表单
                $("#infoForm").ajaxSubmit(function (data) {
                    //data接收返回的值
                    //然后更新共享的user字符串
                    sessionStorage.setItem("user", JSON.stringify(data.data));
                    //更新之后跳转
                    window.location.href = "/mine/profiles.html"
                })

            })

            //通过值上传图片的框的值改变事件,上传头像
            $("#imageInput").change(function () {
                var value = $(this).val()
                if (value) {
                    $("#imageForm").ajaxSubmit(function (data) {
                        if (status == 1) {
                            //如果状态是1
                            //则更新头像数据
                            if (data.status==1){
                            $("#headImg").prop("src",data.url);
                            $("#headImgUrl").val(data.url)
                            }else{
                                alert("上传失败")
                            }
                        }else if (status==0){
                            //如果状态为0
                            //则更新背景板数据
                            if (data.status==1){
                            $(".myBg").css("background-image", "url('" + data.url + "')");
                                $("#coverImgUrl").val(data.url)
                            }else{
                                alert("上传失败")
                            }
                        }
                    })

                }


            })


            //点击设置头像
            $("#headBtn").click(function () {
                $("#imageInput").click()
                status = 1;//设置头像为1
            })

            //点击设置背景板
            $("#coverBtn").click(function () {
                $("#imageInput").click()
                status = 0;//设置背景板为0
            })

        })
    </script>
</head>

<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1);">
                <span>取消</span>
            </a>
        </div>
        <div class="col">
            <span>设置个人资料</span>
        </div>
        <div class="col">
            <a href="javascript:;" id="saveBtn">
                <span>保存</span>
            </a>
        </div>
    </div>
</div>
<!--因为要上传那图片,所以要弄一个图片上传表单-->
<form action="/tencentCloud/upload" method="post" id="imageForm">
    <!--上传名字必须要与参数一致,用style来隐藏-->
    <input type="file" name="pic" style="display: none" id="imageInput">
</form>
<div class="container info">
    <div class="myBg">
        <img id="headImg" class="rounded-circle" render-src="headImgUrl"/>
        <div class="editHead" id="headBtn"><i class="fa fa-pencil-square fa-lg " aria-hidden="true"></i></div>
        <button class="btn btn-outline-light ibtn " id="coverBtn">设置背景</button>
    </div>

    <form id="infoForm" method="post" action="/users">
        <input type="hidden" name="_method" value="put">
        <input type="hidden" name="id" render-value="id">
        <input type="hidden" id="headImgUrl" name="headImgUrl" render-value="headImgUrl">
        <input type="hidden" id="coverImgUrl" name="coverImgUrl" render-value="coverImgUrl">

        <label>昵称</label><input type="text" name="nickName" class="form-control" render-value="nickName">
        <label>性别</label><select class="form-control" name="gender" render-value="gender">
        <option value="-1">保密</option>
        <option value="0">男</option>
        <option value="1">女</option>
    </select>
        <label>地区</label><input type="text" name="place" class="form-control" render-value="place">
        <label>签名</label><textarea name="sign" class="form-control" rows="5" render-html="sign"></textarea>
    </form>
</div>


</body>
</html>
